import React from 'react';
import { Table, Icon, Button, Popconfirm, Input,Switch  } from 'antd';
import router from 'umi/router';
import ModalC from 'components/Modal/domain/domainGroup';
import { connect } from 'dva';
import moment from 'moment';

const Search = Input.Search;

@connect(state => ({
  domainGroup: state.domainGroup,
}))
class Pages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectedRowKeys: [],
      type: 'add',
      currentId: '',
      formatData: {},
      searchValue: '',
    };
  }

  //获取列表数据
  getList = (pageNum = 1, pageSize = 10) => {
    const { searchValue } = this.state;
    this.props.dispatch({
      type: 'domainGroup/getList',
      payload: {
        pageNum,
        pageSize,
        domain: searchValue,
      },
    });
  };

  /**
   * 删除
   */
  delete = ids => {
    this.props.dispatch({
      type: 'domainGroup/delete',
      payload: {
        ids,
      },
      callback: (pageNum, pageSize) => {
        this.setState({
          selectedRowKeys: [],
        });
        this.getList(pageNum, pageSize);
      },
    });
  };
  deleteAll = () => {
    const { selectedRowKeys } = this.state;
    this.delete(selectedRowKeys);
  };
  //批量删除
  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };

  /**
   * modal
   */
  closeModal = () => {
    this.setState({
      visible: false,
      formatData: null,
    });
  };
  //新增编辑
  updateBtn = (type = 'add', record = null) => {
    if (type === 'add') {
      this.setState({
        type: 'add',
        visible: true,
      });
    } else {
      this.setState({
        type: 'edit',
        currentId: record.id,
        visible: true,
        formatData: record,
      });
    }
  };
  //提交数据
  submit = values => {
    const { type, currentId } = this.state;
    if (type === 'add') {
      this.props.dispatch({
        type: 'domainGroup/add',
        payload: {
          ...values,
        },
        callback: (pageNum, pageSize) => {
          this.getList(pageNum, pageSize);
          this.closeModal();
        },
      });
    } else {
      this.props.dispatch({
        type: 'domainGroup/edit',
        payload: {
          ...values,
          id: currentId,
        },
        callback: (pageNum, pageSize) => {
          this.getList(pageNum, pageSize);
          this.closeModal();
        },
      });
    }
  };

  //搜索
  search = value => {
    this.setState(
      {
        searchValue: value,
      },
      () => this.getList()
    );
  };

  //翻页
  pageChange = page => {
    this.getList(page);
  };

  componentDidMount() {
    this.getList();
  }

  render() {
    const {
      domainGroup: { list, total, pageNum, pageSize, loading },
    } = this.props;
    const { selectedRowKeys, visible, formatData } = this.state;

    const colomns = [
      // {
      //   title: '域名组ID',
      //   dataIndex: 'id',
      //   width: 100,
      // },
      {
        title: '设备组名称',
        dataIndex: 'groupTitle',
        width: 80,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: 100,
      },
      {
        title: '创建时间',
        dataIndex: 'createDate',
        width: 100,
        render: text => <span>{moment(text).format('YYYY年MM月DD日')}</span>,
      },
      {
        title: '更新时间',
        dataIndex: 'updateDate',
        width: 100,
        render: text => <span>{moment(text).format('YYYY年MM月DD日')}</span>,
      },

      {
        title: '操作',
        width: 100,
        render: (text, record) => (
          <>
            <span onClick={() => this.updateBtn('edit', record)} className="btnG">
              编辑
            </span>
          </>
        ),
      },
    ];

    const pagination = {
      onChange: this.pageChange,
      total,
      pageSize,
      current: pageNum,
    };

    const rowSelection = {
      columnWidth: 10,
      onChange: this.onSelectChange,
    };
    return (
      <>
        <h3 className="head">域名组管理</h3>
        <Search
          enterButton
          placeholder="输入域名搜索"
          style={{ width: '250px', marginLeft: '20px', marginBottom: '20px' }}
          onSearch={this.search}
        />
        <div style={{ padding: '10px 20px' }}>
          {selectedRowKeys.length > 0 && (
            <Popconfirm
              title="确定要删除吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => this.deleteAll()}
            >
              <Button type="primary" icon="delete">
                批量删除
              </Button>
            </Popconfirm>
          )}

          <Table
            loading={loading}
            pagination={pagination}
            rowSelection={rowSelection}
            columns={colomns}
            dataSource={list}
            rowKey="id"
          />
          <Button onClick={() => this.updateBtn()} type="primary">
            新增
          </Button>
          <ModalC
            visible={visible}
            close={this.closeModal}
            formatData={formatData}
            submit={this.submit}
          />
        </div>
      </>
    );
  }
}

export default Pages;
